<template>
    <div class="hot myFlex">
        <!-- 存货单内容 -->
        <div class="managePanel">
            <el-table
                    border
                    height="100%"
                    ref="mytable"
                    :data="table_data"
                    style="width: 100%;;background-color: gainsboro"
            >
                <el-table-column type="selection" align="center"></el-table-column>

                <el-table-column align="center"
                                 :label="'编号'"
                                 width="80"
                >
                    <template slot-scope="scope">
                        <span>{{scope.$index}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        v-for="(item,index,key) in table_columns"
                        :item="item"
                        :key="key"
                        :index="index"
                        :label="item.label"
                >
                    <template slot-scope="scope">
                        <el-input
                                v-if="scope.row.edit"
                                size="small"
                                v-model="scope.row[item.prop]"
                                :placeholder="'请输入'+item.label"
                                style="width: 100px"
                        ></el-input>
                        <span v-if="!scope.row.edit">{{scope.row[item.prop]}}</span>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <div class="Save" align="center">
            <el-button type="primary" @click="handleUpdate">确定更改</el-button>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Hot",
        data() {
            return {
                is_edit: true, //是否可编辑
                is_delete: true, //是否可删除
                space_color: true, //隔行变色
                //表头信息
                table_columns: [
                    {
                        prop: "name",
                        label: "名称",
                        width: "150"
                    }
                ],
                //表格数据
                table_data:this.$store.state.drinks,
                selectItems:this.$store.state.advertise,
                selectIndexs:[]
            };
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.mytable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.mytable.clearSelection();
                }
            },

            //隔行变色
            tableRowClassName() {
                //选取DOM节点
                var trs = this.$refs.mytable.$el
                    .getElementsByTagName("tbody")[0]
                    .getElementsByTagName("tr");
                for (var i in trs) {
                    if (i % 2 == 0) {
                        //当隔行变色未true时改变颜色
                        if (this.space_color) {
                            trs[i].style.backgroundColor = "#f0f9eb";
                        } else {
                            trs[i].style.backgroundColor = "";
                        }
                    }
                }
            },

            handleUpdate(){
                const selectData = this.$refs.mytable.selection
                let newAdvertise = new Array();

                let tempNameRecord = this.$store.state.nameRecord
                for(let i in selectData){
                    let tempName = selectData[i].name
                    if(tempNameRecord.indexOf(tempName)!=-1){
                        newAdvertise.push(tempName)
                    }else if(selectData[i].id < 9){
                        newAdvertise.push(tempNameRecord[selectData[i].id])
                    }else {
                        newAdvertise.push("默认果汁")
                    }


                }

                this.$store.commit('updateAdvertise',newAdvertise)


                const loading = this.$loading({
                    lock: true,
                    text: '广告位更新中',
                    spinner: 'el-icon-loading',
                    target:'.managePanel',		//指定 target 即可！
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                //延时跳转
                const _this = this
                setTimeout(() => {
                    loading.close();
                    _this.$message({
                        message: "广告位更新成功！",
                        type: "success",
                        offset:300,
                        duration:1000
                    });
                }, 600);
            }
        },

        mounted: function() {
            //确保方法在页面渲染后调用
            this.$nextTick(function() {
                /////方法
                this.tableRowClassName();
            });

            //需要在页面渲染后，才有 table 可以操作
            for(let i in this.selectItems){
                for(let j=0;j<this.table_data.length;j++){
                    if(this.table_data[j].name === this.selectItems[i]){
                        this.selectIndexs.push(this.table_data[j])
                    }
                }
            }
            this.toggleSelection(this.selectIndexs)
        },

        watch: {
            space_color: function() {
                //监听数据变化
                this.$nextTick(function() {
                    /////方法
                    this.tableRowClassName();
                });
            },
            table_data: function() {
                //监听数据变化f
                this.$nextTick(function() {
                    /////方法
                    this.tableRowClassName();
                });
            }
        }
    }
</script>

<style scoped>
    .myFlex{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .hot{
        width: 100%;
        height:100%;
    }

    .managePanel{
        width: 45%;
        height: 82%;
        background-color: white;
        border-radius: 20px;
        padding: 20px;
        opacity: 0.9;
    }

    .Save{
        width: 40%;
        padding-top: 20px;
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    @media screen and (max-width: 1200px) {
        .managePanel{
            width: 100%;
            height: 82%;
            background-color: white;
            border-radius: 20px;
            padding: 20px;
            opacity: 0.9;
        }
    }

</style>